// 创建一个路由器，并将其暴露出去
import { createRouter, createWebHistory } from 'vue-router';


// 引入组件
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import detail from '../pages/detail.vue';

// 创建路由器

export default createRouter({
    // 工作模式
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    {
      path: '/news',
      name: 'News',
      component: News,
      children: [
        {
        //   path: 'detail',  params type 
          // content 可有可无 使用 ?
          path: `detail/:id/:title/:content?`,
          name: 'Detail',
          component: detail,
          //  第一种
          //   props使用 自动将路由收到的params参数映射到组件的 props，这样使用的的地方可以直接导出
          props: true,
          //  第二种 函数写法
          // props(route) {
          //   // console.log(route);
          //   return route.query
          // },
          //  第三种
         
        },
      ],
    },
    {
      path: "/",
      redirect: "/home",
    },
  ],
});

